<template>
    <div class="index">
        <div class="background"></div>
        <div class="left">
            <ul>
                <li>上次使用时间：<br><span v-text="$store.getters['base/base'].lastLoginTime"></span></li>
                <li>操作系统：<span v-text="`${os.type()} ${os.platform()} ${os.arch()} ${os.release()}`"></span></li>
                <li>计算机名：<span v-text="os.hostname()"></span></li>
                <li>剩余内存：<span v-text="`${freeMem}G/${totalMem}G`"></span></li>
            </ul>
        </div>
        <div class="main">
            <ul class="list" :style="`height: ${style.listHeight}px`">
                <li v-for="(item,i) in list" :key="i" @click="itemClick(item,i)">
                    <img :src="require('../../assets/index/'+item.img)"/>
                    <span v-text="item.name"></span>
                </li>
            </ul>
        </div>

        <template>
            <ac-base-config-dialog
                    v-if="ui.baseConfigDialog.visible"
                    :dialogVisible="ui.baseConfigDialog.visible"
                    :dialogVisible.sync="ui.baseConfigDialog.visible"
                    @onSubmit="handleDialogSubmit">

            </ac-base-config-dialog>
        </template>
    </div>
</template>

<script type="text/ecmascript-6">
    import os from 'os';
    import electron from 'electron';
    import path from 'path';
    import fs from 'fs';

    import AcBaseConfigDialog from "./BaseConfigDialog";

    /**
     * @author 白雨浓
     * @date 2018/1/13 13:17
     *
     * 首页
     **/
    export default {
        components: {AcBaseConfigDialog},
        name: 'AcIndex',
        data() {
            return {
                ui: {
                    baseConfigDialog: {
                        visible: false
                    }
                },
                style: {
                    listHeight: this.$window.height * .85,
                },
                os: os,
                list: [
                    {name: '基础设置', img: '设置.png', link: ''},
                    {name: '实体类生成', img: '数据实体.png', link: {name: 'CreateEntity'}},
                    {name: 'MVC生成', img: 'springboot.png', link: {name: 'CreateMVC'}},
                    {name: 'MyBaits代码生成', img: 'mybatis.png', link: {name: 'CreateMyBatis'}},
                    {name: '异常类生成', img: '提示.png', link: {name: 'CreateException'}},
                    {name: '实体类转JSON', img: 'json.png', link: {name: 'EntityToJSON'}},
                    {name: 'ElementForm', img: '表单管理.png', link: {name: 'ElementForm'}},
                    {name: '一键生成', img: '一键生成.png', link: ''},
                    {name: '测试', img: '测试.png', link: '/test'},
                ],
                config: null,
            }
        },
        computed: {
            freeMem() {
                return (this.os.freemem() / 1073741824).toFixed(2);
            },
            totalMem() {
                return (this.os.totalmem() / 1073741824).toFixed(2);
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.$window.onChange((w, h) => {
                    this.style.listHeight = h * .85;
                });
                this.readConfig();
            });
        },
        methods: {
            readConfig() {
                const dataPath = (electron.app || electron.remote.app).getPath('userData');
                const filePath = path.join(dataPath, 'config.cnf');

                if (!fs.existsSync(filePath)) {
                    return;
                }
                const data = fs.readFileSync(filePath, 'utf-8');

                try {
                    this.config = JSON.parse(data + '');
                    this.$storage.local.setItem('config', this.config);
                    this.setActiveConfigName();
                } catch (e) {
                    this.$$msg.error('配置文件损坏，请重新配置');
                }
            },
            itemClick(item, i) {
                if (i === 0) {
                    this.ui.baseConfigDialog.visible = true;
                    return;
                }

                if (item.name === '一键生成') {
                    this.$$msg.warning('尚未开启！');
                    return;
                }

                if (!this.config) {
                    this.$$msg.error('请先完成基础设置');
                    return;
                }

                this.$router.push(item.link);
            },
            setActiveConfigName() {
                const name = this.config.list[this.config.active].name;
                this.list[0].name = `基础配置 (当前:${name})`;
            },
            handleDialogSubmit() {
                this.config = this.$storage.local.getItem('config');
                this.setActiveConfigName();
                location.reload();
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .index {
        display flex
        justify-content space-around

        .background {
            position absolute
            top 0
            left 0
            z-index -999
            width 100%
            height 100%
            background-image url("../../assets/index/background.png")
            background-size cover
        }

        .left {
            width 200px
            margin-top 100px

            ul {
                list-style none
            }

            li {
                color white
                text-align center
                margin 20px
                font-size .8em
            }
        }

        .main {
            width 80%
        }

        .list {
            width 66%
            margin 30px
            list-style none
            overflow auto
            float right

            li {
                position relative
                width 230px
                height 130px
                background-color #4C4A48
                color white
                text-align center
                margin 2px
                font-size .8em
                float left
                cursor pointer
                border 2px solid transparent

                &:hover {
                    border 2px solid #A5A4A3
                }
            }

            img {
                width 50px
                margin 35px auto 0 auto
            }

            span {
                position absolute
                bottom 8px
                left 8px
                color white
                font-size .85em
            }
        }

        .btn {
            width 130px
            margin 30px
            color #666
        }

    }
</style>